<template>
  <div class="toast" :class="{ show: showToast }">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      showToast: false,
      message: "",
      toastTimeout: null
    };
  },
  methods: {
    show(message, duration = 2000) {
      this.message = message;
      this.showToast = true;

      clearTimeout(this.toastTimeout);
      this.toastTimeout = setTimeout(() => {
        this.showToast = false;
      }, duration);
    }
  }
};
</script>

<style scoped>
.toast {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.toast.show {
  opacity: 1;
}
</style>
